<script>
import AnswerQuestionComm from "@/components/comp/question_comm/AnswerQuestionCommDemo.vue";

export default {
  name: "QuestionHint",
  components: {AnswerQuestionComm},
  data(){
    return {
      isClicked:false,
      tx:'',
      txType:'',
      dialogVisible: false,
      account: {
        realName:'',
        address:''
      }
    }
  },
  created() {
    //弹框确认用户信息
    this.confirm_acc();
    this.init_hint();
  },
  methods:{

    //弹框确认用户信息
    confirm_acc(){
      const accId = sessionStorage.getItem("accountId");
      this.$http.get("accounts/get_one?id=" + accId ).then(res=>{
        this.account = res.data.data;
        var str_areas = this.account.areaName
        var areas_str = '';
        if(str_areas.length>0){
          var area_arr = str_areas.split(",")
          area_arr.forEach(tem=>{
            areas_str += tem;
          })
        }
        var tar_address =   areas_str + this.account.address;
        this.account.address = tar_address;
        this.dialogVisible = true;
      })
    },

    //关闭弹框
    back2login(done) {
      this.dialogVisible = false;
      this.$router.push("acc_login")
    },

    //初始化数据，获取tx相关信息
    init_hint(){
      this.txType = Number(this.$store.state.acc_task_type);
      if(this.txType!=0){
          const _this = this;
          this.$http.get("txs/get_by_task_type?txType="+this.txType).then(res=>{
              if(res.data.success){
                  _this.tx = res.data.data;
              }else {
                _this.$message.error(res.data.errMsg);
              }
          })
      }else{
        this.$message.warning("请选择任务后，再进行测试");
        this.$router.push("/que_list");
      }
    },

    //进入答题页面
    just_test(){
        this.$router.push('start_test')
    },
  }
}
</script>

<template>
  <el-card class="card1">

    <div class="ql-h2">　　
      {{tx.guide}}
    </div>
    <div class="ql-div1">
      <el-button @click="just_test" :disabled="isClicked" class="ql-btn1" type="primary"  circle><span class="ql-sp1">模拟练习</span></el-button>
    </div>
    <el-dialog
        :close-on-click-modal="false"
        align="center"
        :visible.sync="dialogVisible"
        width="35%"
        :show-close="false"
    >
      <template slot="title">
        <div style="text-align: center;font-size: 24px;font-weight: 700">
          基本信息确认
        </div>
      </template>


      <el-row style="margin-bottom: 15px">
        <el-col :span="8" style="text-align: right;font-size: 20px;font-weight: 700">姓&nbsp;&nbsp;名：</el-col>
        <el-col :offset=1 :span="15" style="text-align: left;font-size: 20px;">{{ account.realName }}</el-col>
      </el-row>
      <el-row style="margin-bottom: 15px">
        <el-col :span="8" style="text-align: right;font-size: 20px;font-weight: 700">性&nbsp;&nbsp;别：</el-col>
        <el-col :offset=1 :span="15" style="text-align: left;font-size: 20px;">{{ account.gender?'女':'男' }}</el-col>
      </el-row>
      <el-row style="margin-bottom: 15px">
        <el-col :span="8" style="text-align: right;font-size: 20px;font-weight: 700">年&nbsp;&nbsp;龄：</el-col>
        <el-col :offset=1 :span="15" style="text-align: left;font-size: 20px;">{{ account.age }}岁</el-col>
      </el-row>
      <el-row style="margin-bottom: 15px">
        <el-col :span="8" style="text-align: right;font-size: 20px;font-weight: 700">学&nbsp;&nbsp;历：</el-col>
        <el-col :offset=1 :span="15" style="text-align: left;font-size: 20px;">{{ account.qualification }}</el-col>
      </el-row>
      <el-row style="margin-bottom: 15px">
        <el-col :span="8" style="text-align: right;font-size: 20px;font-weight: 700">电话号码：</el-col>
        <el-col :offset=1 :span="15" style="text-align: left;font-size: 20px;">{{ account.phone }}</el-col>
      </el-row>

      <el-row style="margin-bottom: 10px">
        <el-col :span="8" style="text-align: right;font-size: 20px;font-weight: 700">现居地址：</el-col>
        <el-col :offset=1 :span="15" style="text-align: left;font-size: 20px;">{{ account.address }}</el-col>
      </el-row>





      <span slot="footer" class="dialog-footer">
              <el-button @click="back2login">返 回</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
    </el-dialog>
  </el-card>

</template>

<style scoped>
.card1{
  height: 100%;
  width: 100%;
  background-color: #e0f6f1;

}
.card2{
  display: flex;
  justify-content: center;
  align-items: center;
}
.ql-h2{
  margin-top: 30px;
  font-weight: 700;
  font-size: 45px;
}
.ql-div1{
  margin-top: 5vw;
  display: flex;
  justify-content: space-around;
}

/deep/.ql-btn1{
  width: 20vw;
  height: 20vw;
  font-size: 45px;
}



</style>